<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-collection"></i> 分类列表</span>
            <el-button
              style="float: right; padding: 2px 0"
              icon="el-icon-plus"
              type="text"
              @click="handleAddCategory()"
              >新增分类</el-button
            >
          </div>
          <el-table
            v-loading="loading"
            :data="categoryList"
            :height="tableHeight"
            highlight-current-row
            @row-click="getCategoryTagList"
            style="width: 100%"
          >
            <!-- <el-table-column
              label="序号"
              width="60"
              type="index"
            ></el-table-column> -->

            <el-table-column
              label="分类名称"
              align="center"
              prop="name"
              :show-overflow-tooltip="true"
            ></el-table-column>

            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="0"
                  :inactive-value="1"
                  @change="handleStatusChange(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="160"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="新增"
                  placement="top"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-plus"
                    @click="handleAddTag(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click.stop="handleUpdateCategory(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click.stop="handleDeleteCategory(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            layout="total,  prev, pager, next"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getCategoryList"
          />
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-key"></i> 标签列表</span>
            <!-- <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-refresh-right"
            ></el-button> -->
          </div>
          <el-table
            v-loading="tagLoading"
            :data="tagList"
            :height="tableHeight"
            highlight-current-row
            @row-click="handleTagDetail"
            style="width: 100%"
          >
            <el-table-column label="标签名称" prop="content"></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click.stop="handleDeleteTag(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="tagTotal > 0"
            :total="tagTotal"
            layout="total,  prev, pager, next"
            :page.sync="queryTagParams.pageNum"
            :limit.sync="queryTagParams.pageSize"
            @pagination="getCategoryTagList"
          />
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card :bordered="false" style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-document"></i> 标签详情</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              icon="el-icon-refresh-right"
              @click="handleUpdateTag()"
              >更新</el-button
            >
          </div>
          <el-form :model="cacheForm">
            <el-row :gutter="32">
              <el-col :offset="1" :span="22">
                <el-form-item label="标签名称:" prop="content">
                  <el-input v-model="tagDialogData.content"  />
                </el-form-item>
              </el-col>

              <el-col :offset="1" :span="22">
                <el-form-item label="标签备注:" prop="cacheValue">
                  <el-input
                    v-model="tagDialogData.remark"
                    type="textarea"
                    :rows="8"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <!-- 分类dialog -->
      <el-dialog
        :title="dialogStatus.title"
        :visible.sync="dialogStatus.visible"
        width="500px"
        append-to-body
        center
        @close="closeDialog"
      >
        <el-form
          ref="form"
          :model="dialogData"
          :rules="rules"
          label-width="100px"
          v-loading="dialogLoading"
        >
          <el-form-item label="分类标题" prop="name">
            <el-input
              :disabled="dialogStatus.isDetail"
              v-model="dialogData.name"
              placeholder="请输入分类标题"
            />
          </el-form-item>

          <el-form-item label="分类状态" prop="status">
            <el-select
              :disabled="dialogStatus.isDetail"
              v-model="dialogData.status"
              placeholder="分类状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="item in statusArr"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="描述">
            <el-input
              :disabled="dialogStatus.isDetail"
              v-model="dialogData.content"
              type="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="dialogStatus.visible = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 标签dialog -->
      <el-dialog
        :title="dialogStatus.title"
        :visible.sync="dialogStatus.tagVisible"
        width="500px"
        append-to-body
        center
        @close="closeTagDialog"
      >
        <el-form
          ref="tagForm"
          :model="tagDialogData"
          :rules="rules"
          label-width="100px"
          v-loading="dialogLoading"
        >
          <el-form-item label="标签标题" prop="content">
            <el-input
              :disabled="dialogStatus.isDetail"
              v-model="tagDialogData.content"
              placeholder="请输入标签标题"
            />
          </el-form-item>

          <el-form-item label="标签状态" prop="status">
            <el-select
              :disabled="dialogStatus.isDetail"
              v-model="tagDialogData.status"
              placeholder="分类状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="item in statusArr"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="标签描述">
            <el-input
              :disabled="dialogStatus.isDetail"
              v-model="tagDialogData.remark"
              type="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleTagSubmit">确 定</el-button>
          <el-button @click="dialogStatus.tagVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import to from "await-to-js";
import {
  getCategoryList as getCategoryListApi,
  addCategory as addCategoryApi,
  deleteCategory as deleteCategoryApi,
  addTag as addTagApi,
  updateTag as updateTagApi,
  updateCategory as updateCategoryApi,
  getTagList as getTagListApi,
  deleteTag as deleteTagApi,
} from "../../../api/video/category";
import { Message } from "element-ui";
export default {
  name: "category",
  data() {
    return {
      cacheNames: [],
      cacheKeys: [],
      cacheForm: {},
      loading: false,
      tagLoading: false,
      subLoading: false,
      nowCacheName: "",
      total: 0,
      tagTotal: 0,
      tagList: [],
      tableHeight: window.innerHeight - 250,
      dialogLoading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      queryTagParams: {
        categoryId: "",
        pageSize: 10,
        pageNum: 1,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      dialogStatus: {
        isDetail: false,
        isUpdate: false,
        isAdd: false,
        visible: false,
        tagVisible: false,
        isUploading: false,
        title: "",
      },
      dialogData: {},
      tagDialogData: {
        content:'',
        remark:''
      },
      currentCategoryId: "",
      //   分类列表
      categoryList: [],
      rules: {
        name: [
          { required: true, message: "分类标题不能为空！", trigger: "blur" },
        ],
        status: [
          { required: true, message: "状态为必选项！", trigger: "blur" },
        ],
        content: [
          { required: true, message: "标题不能为空！", trigger: "blur" },
        ],
      },
      statusArr: [
        {
          id: 0,
          label: "正常",
        },
        {
          id: 1,
          label: "停用",
        },
      ],
    };
  },
  methods: {
    // 获取分类列表
    async getCategoryList() {
      this.loading = true;
      this.queryTagParams.categoryId = this.currentCategoryId;
      const [err, res] = await to(getCategoryListApi(this.queryParams));
      if (!err) {
        console.log(res);
        this.categoryList = res.rows;
        this.total = res.total;
        console.log(this.total);
        this.loading = false;
      } else {
        this.loading = false;
      }
    },
    // 获取标签列表
    async getCategoryTagList(row) {
      if (row) {
        this.currentCategoryId = row.categoryId;
      }
      this.queryTagParams.categoryId = this.currentCategoryId;
      this.tagLoading = true;
      const [err, res] = await to(getTagListApi(this.queryTagParams));
      if (!err) {
        console.log(res);
        this.tagList = res.rows;
        this.tagTotal = res.total;
        this.tagLoading = false;
      } else {
        this.tagLoading = false;
      }
    },
    // 添加分类按钮
    handleAddCategory() {
      this.dialogStatus.visible = true;
      this.dialogStatus.isAdd = true;
    },
    // 更新标签按钮
    handleUpdateCategory(row) {
      this.dialogStatus.visible = true;
      this.dialogStatus.isUpdate = true;
      this.dialogData = row;
    },
    // 添加标签按钮
    handleAddTag(row) {
      this.dialogStatus.tagVisible = true;
      this.dialogStatus.title = "新增标签";
      this.currentCategoryId = row.categoryId;
    },
    // 删除标签
    async handleDeleteTag(row) {
      const [err] = await to(deleteTagApi(row.tagId));
      if (!err) {
        Message.success("删除成功");
        this.getCategoryTagList();
      } else {
        Message.error("删除失败");
      }
    },
    // 删除分类
    async handleDeleteCategory(row) {
      const [err] = await to(deleteCategoryApi(row.categoryId));
      if (!err) {
        Message.success("删除成功");
        this.getCategoryList();
      } else {
        Message.error("删除失败");
      }
    },
    // 标签dialog提交
    handleSubmit() {
      this.$refs["form"].validate(async (vilid) => {
        if (vilid) {
          console.log(this.dialogData);
          if (this.dialogData.categoryId) {
            // 有id为编辑
            const [err, res] = await to(updateCategoryApi(this.dialogData));
            if (!err) {
              Message.success("更改成功");
              this.dialogStatus.visible = false;
            } else {
              Message.error("更改失败");
              this.dialogStatus.visible = false;
            }
          } else {
            const [err, res] = await to(addCategoryApi(this.dialogData));
            if (!err) {
              Message.success("新增成功");
              this.dialogStatus.visible = false;
            } else {
              Message.error("新增失败");
              this.dialogStatus.visible = false;
            }
          }
        }
      });
    },
    // 关闭dialog
    closeDialog() {
      this.dialogData = {};
      this.getCategoryList();
    },
    closeTagDialog() {
      this.tagDialogData = {};
      this.getCategoryTagList();
    },
    async handleUpdateTag() {
      this.tagDialogData.categoryId = this.currentCategoryId;
      const [err, res] = await to(updateTagApi(this.tagDialogData));
      if (!err) {
        Message.success("更改成功");
        this.dialogStatus.tagVisible = false;
        this.getCategoryTagList();
      } else {
        Message.error("更改失败");
        this.dialogStatus.tagVisible = false;
      }
    },
    // 标签dialog提交
    handleTagSubmit() {
      this.$refs["tagForm"].validate(async (vilid) => {
        if (vilid) {
          console.log(this.tagDialogData);
          this.tagDialogData.categoryId = this.currentCategoryId;
          if (this.tagDialogData.tagId) {
            // 有id为编辑
            const [err, res] = await to(updateTagApi(this.tagDialogData));
            if (!err) {
              Message.success("更改成功");

              this.dialogStatus.tagVisible = false;
              this.getCategoryTagList();
            } else {
              Message.error("更改失败");
              this.dialogStatus.tagVisible = false;
            }
          } else {
            const [err, res] = await to(addTagApi(this.tagDialogData));
            if (!err) {
              Message.success("新增成功");
              this.dialogStatus.tagVisible = false;
              this.getCategoryTagList();
            } else {
              Message.error("新增失败");
              this.dialogStatus.tagVisible = false;
            }
          }
        }
      });
    },
    // 标签详情
    handleTagDetail(row) {
      console.log(row);
      this.tagDialogData = row;
    },
  },
  created() {
    this.getCategoryList();
  },
};
</script>
